<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-07-05 15:25:53
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-07-31 11:18:58
 * @FilePath: \vue3-progect\src\views\example\three\geometry\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--缓存几何-->
<template>
	<div id="map1"></div>
</template>

<script setup>
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { AxesHelper } from "../helper/AxesHelper";
import { CameraHelper } from "../helper/CameraHelper";
import { WebGLRenderer } from "../create/renderer";
import { OrbitControlsHelper } from "../helper/OrbitControls";
import { PerspectiveCamera } from "../create/camera";
import { onMounted } from "vue";

onMounted(() => {
	let container = document.getElementById("map1");
	const obj = new ChinaMap(container, { axesHelper: true });
});
class ChinaMap {
	constructor(container, option = {}) {
		this.container = container;
		this.option = option;
		this.init();
	}
	init() {
		this.scene = new THREE.Scene();
		this.setCamera();
		this.setRenderer();
		this.animate();
		this.initHelper();
		const geometry = new THREE.BoxGeometry();
		const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
		const cube = new THREE.Mesh(geometry, material);
		this.scene.add(cube);
	}

	setCamera() {
		this.camera = new THREE.PerspectiveCamera(
			90,
			this.container.offsetWidth / this.container.offsetHeight,
			0.1,
			1000
		);
		this.camera.position.z = 100;
	}
	setRenderer() {
		this.renderer = new THREE.WebGLRenderer();
		this.renderer.setSize(
			this.container.offsetWidth,
			this.container.offsetHeight
		);
		this.container.appendChild(this.renderer.domElement);
	}
	setAmientLight() {
		this.ambientLight = new THREE.AmbientLight(0xffffff);
		this.scene.add(this.ambientLight);
	}
	animate() {
		requestAnimationFrame(this.animate.bind(this));
		this.render();
	}
	render() {
		this.renderer.render(this.scene, this.camera);
	}

	/**
	 * ---辅助功能
	 */
	//初始化辅助功能
	initHelper() {
		this.option.axesHelper && this.AxesHelper();
		!this.option.OrbitControlsHelper && this.OrbitControlsHelper();
	}
	//坐标轴
	AxesHelper() {
		const axesHelper = new THREE.AxesHelper(200);
		this.scene.add(axesHelper);
	}
	//
	// 相机轨道运动
	OrbitControlsHelper() {
		const controls = new OrbitControls(this.camera, this.renderer.domElement);
		controls.update();
	}
}
</script>

<style lang="less" scoped>
#map1 {
	height: 100%;
}
</style>
